<template>
  <view class="stock-records">
    <view class="stock-records-sticky">
      <u-tabs
        :list="tabs"
        :current="currentTab"
        @click="handleTabClick"
        lineColor="#c4996c"
        :activeStyle="{
          color: '#c4996c',
          fontWeight: 'bold'
        }"
      ></u-tabs>
      <view class="search-container">
        <u-search
          v-model="productInfo"
          placeholder="搜索产品名称、款号"
          :showAction="false"
          shape="round"
          bgColor="#f5f5f5"
          height="40"
          @search="handleSearch"
        >
          <template #icon>
            <u-icon name="search"></u-icon>
          </template>
        </u-search>
      </view>
    </view>
    <!-- 入库记录 -->
    <scroll-view scroll-y class="stock-list" v-if="currentTab == 1">
      <view class="stock-item" v-for="(item, index) in stockEntries" :key="index">
        <view class="item-header">
          <view class="timestamp">{{ item.createTime }}</view>
          <view class="edit-btn" @click="handleEdit(item)">编辑</view>
        </view>
        <view class="item-content" @click="goToProductDetails(item)">
          <image class="product-image" :src="item.image" mode="aspectFill" />
          <view class="product-info">
            <view class="product-name">{{ item.productName }}</view>
            <view class="product-code">款号：{{ item.productSkuCode }}</view>
            <view class="product-footer">
              <view class="product-spec">规格：{{ item.spec }}</view>
              <view class="entry-quantity"
                >入库数量：<text class="quantity-text">{{ item.inStockQuantity }}</text></view
              >
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 库存 -->
    <scroll-view scroll-x class="stock-list1" v-if="currentTab == 0">
      <view class="table">
        <view class="table-header">
          <view class="th">款号</view>
          <view class="th">颜色</view>
          <view class="th">尺码</view>
          <view class="th">吊牌价/元</view>
          <view class="th">进货数量/件</view>
          <view class="th">销售数量/件</view>
          <view class="th">本年度库存结余/件</view>
          <view class="th">往年库存结余/件</view>
          <view class="th">总库存/件</view>
          <view class="th">动销比</view>
          <view class="th">操作</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(item, index) in tableData" :key="index">
            <view class="td">{{ item.productSkuCode || "-" }}</view>
            <view class="td">{{ item.color || "-" }}</view>
            <view class="td">{{ item.size || "-" }}</view>
            <view class="td">¥{{ item.price.toFixed(2) }}</view>
            <view class="td">{{ item.purchaseQuantity || "-" }}</view>
            <view class="td">{{ item.saleQuantity || "-" }}</view>
            <view class="td">{{ item.thisYearStock || "-" }}</view>
            <view class="td">{{ item.lastYearStock || "-" }}</view>
            <view class="td">{{ item.totalQuantity || "-" }}</view>
            <view class="td">{{ item.salesRatio || "-" }}</view>
            <view class="td" @click="editInventory(item)">查看库存</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <up-loadmore :loading-text="loadStatus" v-if="currentPage > 1 || tableCurrentPage > 1" />
    <view class="button-box px-48">
      <view class="exit-login bg2" @click="goToDetails">添加商品入库</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { shopApi } from "@/api";

let currentPage = ref(1);
let pageSize = ref(15);
let totalCount = ref(0);
let loadStatus = ref("正在加载中");

const currentTab = ref(0);
const productInfo = ref("");
const tabs = ref([{ name: "店铺库存" }, { name: "入库记录" }]);

const stockEntries = ref([]);

const tableData = ref([]);
const tableCurrentPage = ref(1);
const tableCount = ref(0);

const handleTabClick = (item) => {
  currentTab.value = item.index;
  loadStatus.value = "正在加载中";
  stockEntries.value = [];
  tableData.value =[]
  currentPage.value = 1;
  if (item.index == 0) {
    getTableData(1);
  } else {
    
    getList(1);
  }
};

const editInventory = (item) => {
  // uni.navigateTo({
  //   url: `/pagesshop/inventory/editShop?shopData=${JSON.stringify(item)}&type=1`
  // });
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
};

const handleEdit = (item) => {
  // TODO: 此处编辑未写
  uni.navigateTo({
    url: `/pagesshop/inventory/editShop?shopData=${JSON.stringify(item)}&type=2`
  });
};
const goToDetails = () => {
  uni.navigateTo({
    url: `/pagesshop/inventory/add`
  });
};
const goToProductDetails = (item) => {
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
}
const handleSearch = ()=>{
  currentPage.value=1
  if(currentTab.value==0){
    getTableData(1)
  }else{
    getList(1)
  }
 
}
function getList(type) {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    productInfo: productInfo.value
  };
  shopApi.SHOPSTOCKGETRECORDLIST(params).then((res) => {
    if (res.code != 200) {
      uni.showToast({
        title: res.errMsg,
        icon: "success"
      });
      return;
    }
    totalCount.value = res.result.totalCount;
    if (type == 1) {
      stockEntries.value = res.result.data; 
    }else{
      stockEntries.value = stockEntries.value.concat(res.result.data);
    }
  });
}
const getTableData = (type) => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    productInfo: productInfo.value
  };
  shopApi.SHOPSTOCKGETSTOCKLIST(params).then((res) => {
    if (res.code != 200) {
      uni.showToast({
        title: res.errMsg,
        icon: "success"
      });
      return;
    }
   
    tableCount.value = res.result.totalCount;
    if (type == 1) {
      tableData.value = res.result.data; 
    }else{
      tableData.value = tableData.value.concat(res.result.data);
    }
  });
};
onShow((option) => {
  getList(1);
  getTableData(1);
});
// 触底加载
onReachBottom(() => {
  loadStatus.value = "正在加载中";
  if (currentTab.value == 0) {
    if (tableData.value.length >= tableCount.value) {
      loadStatus.value = "没有更多数据了";
      return;
    }
    tableCurrentPage.value++;
    getTableData(2);
  } else {
    if (stockEntries.value.length >= totalCount.value) {
      loadStatus.value = "没有更多数据了";
      return;
    }
    currentPage.value++;
    getList(2);
  }
});

// 下拉刷新
onPullDownRefresh(() => {
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  loadStatus.value = "正在加载中";
  // isloading.value = false;
  // 入库记录
  currentPage.value = 1;
  totalCount.value = 0;
  stockEntries.value = [];
  // 库存列表
  tableData.value = [];
  tableCurrentPage.value = 1;
  tableCount.value = 0;
  getList(1);
  getTableData(1);
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 2000);
});
</script>
<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.stock-records {
  display: flex;
  flex-direction: column;
  .stock-records-sticky {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 99;
  }

  .search-container {
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    .u-search-box-content{
      width: 100%;
      background-color: #fff;
      margin-bottom: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
    }
    .u-search-box{
      background-color: #fff;
    }
  }

  .stock-list {
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
    padding-bottom: 150rpx;
    .stock-item {
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 24rpx;
      padding: 20rpx;
      box-sizing: border-box;
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        .timestamp {
          font-size: 18rpx;
          color: rgba(0, 0, 0, 0.6);
        }

        .edit-btn {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.6);
        }
      }

      .item-content {
        display: flex;

        .product-image {
          width: 96rpx;
          height: 96rpx;
          background-color: #f5f5f5;
          margin-right: 20rpx;
          border-radius: 8rpx;
        }

        .product-info {
          flex: 1;

          .product-name {
            font-size: 26rpx;
            color: rgba(44, 44, 44, 1);
            margin-bottom: 10rpx;
          }

          .product-code,
          .product-spec,
          .entry-quantity {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 10rpx;

            &:last-child {
              margin-bottom: 0;
            }
          }

          .product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .entry-quantity {
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.9);
              margin-bottom: 10rpx;

              .quantity-text {
                font-size: 22rpx;
                color: rgba(0, 0, 0, 0.9);
              }

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
  .stock-list1 {
    padding-bottom: 150rpx;
    .table {
      min-width: 750rpx;

      .table-header {
        display: flex;
        .th {
          flex: 1;
          padding: 20rpx;
          box-sizing: border-box;
          font-size: 28rpx;
          color: #666;
          text-align: center;
          min-width: 160rpx;
          background: rgba(243, 243, 243, 1);
          &:first-child {
            min-width: 100rpx;
          }
        }
      }

      .table-body {
        .table-row {
          display: flex;
          border-bottom: 2rpx solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }

          .td {
            flex: 1;
            padding: 20rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            color: #333;
            text-align: center;
            min-width: 160rpx;

            &:first-child {
              min-width: 100rpx;
            }
          }
        }
      }
    }
  }

  .button-box {
    width: 100%;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    z-index: 9;
    background-color: #fff;
  }
  .exit-login {
    width: 654rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #d68e44;
    color: #ffffff;
    text-align: center;
    border-radius: 64px;
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }
  .bg1 {
    background: rgba(253, 236, 219, 1);
    color: rgba(145, 74, 0, 1);
  }
  .exit-login:after {
    border: none;
  }

  :deep(.u-tabs__wrapper__nav__item) {
    flex: 1;

    &.u-tabs__wrapper__nav__item--active {
      color: #c4996c !important;
      font-weight: bold;
    }
  }
}
</style>
